<template>
  <div class="container">
    <div class="flex solid-bottom padding justify-center">
      <div class="padding-sm margin-xs radius">
      <img class="userinfo-avatar" :src="avatarUrl" alt="ava">
      </div>
      <div class="padding-sm margin-xs radius">
      <img src="/static/images/vs.png" alt="vs" class="imgSize2">
      </div>
      <div class="padding-sm margin-xs radius">
      <img class="userinfo-avatar" :src="counterUrl" alt="ava">
      </div>
    </div>
    <div class="scoreClass">{{scoreI}} {{space}} {{scoreY}}</div>
    <img v-if="isWin" src="/static/images/win.png" alt="win" class="imgSize">
    <img v-else src="/static/images/fail.png" alt="fail" class="imgSize">
    <button class="btnClass" @click="backTo">返回主界面</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      space: '--------',
      scoreI: 90,
      scoreY: 80,
      nickName: '',
      avatarUrl: '',
      counterUrl: '',
      isWin: false
    }
  },
  mounted () {
    if (this.scoreI > this.scoreY) {
      this.isWin = true
    }
  },
  methods: {
    backTo () {
      const url = '../main/main?nickName=' + this.nickName + '&avatarUrl=' + this.avatarUrl
      mpvue.navigateTo({url})
    }
  },
  onLoad: function (options) {
    console.log(options.avatarUrl)
    this.nickName = options.nickName
    this.scoreI = options.score1
    this.scoreY = options.score2
    this.avatarUrl = options.avatarUrl
    this.counterUrl = options.counterUrl
  }
}
</script>
<style>
.imgSize {
  width: 350px;
  height: 200px;
}
.imgSize2 {
    width: 65px;
    height: 45px;
    padding: 0px 10px;
}
.btnClass {
  border-radius: 30px;
  box-shadow: 0 9px #999;
  font-family: YouYuan;
}
.scoreClass {
   text-align: center;
   font-size: 25px;
   color: white;
}
.btnClass:hover {
  background-color: aliceblue;
}

.btnClass:active {
  background-color: aliceblue;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 0rpx;
  border-radius: 50%;
}
</style>

